
<template>
  <el-form 
  	style="width: 100%"
  	:model="queryData"
  	label-position="left" 
  	:inline="true" 
  	class="demo-form-inline">
  		<template 
  			v-for="(item, index) in queryFormItems">
  			 
  			<el-form-item :key="'i' + index"
  				:style="{width: item.itemWidth + 'px' || '350px'}"
  				:label-width="item.labelWidth + '' || '100px'"
  				:label="item.label">
  				<!--类型为输入框时-->
  				<el-input 
  					v-if='item.isInput'
  					v-model="queryData[item.value]"
  					:placeholder="item.placeholder || '请输入'"
  					:style="{width: item.valueWidth + 'px' || '250px'}"
  					:size="item.size || small "
  					:maxlength="item.maxlength" 
  					:disabled="item.disabled || false" 
  					:type="item.type || 'text'" 
  					:max="item.max" 
  					:min="item.min"
  					:readonly="item.readonly || false"
  					></el-input>	
  				<!--类型为下拉选框时-->
          <el-select 
          	v-else-if='item.isSelect'
          	v-model="queryData[item.value]"
          	:style="{width: item.valueWidth + 'px' || '250px'}"
          	:placeholder="item.placeholder || '请选择'"
          	:multiple="item.multiple || false" 
          	:disabled="item.disabled || false" 
          	:size="item.size || 'small'" 
          	:clearable="item.clearable || false" 
          	:multiple-limit="item.multipleLimit || 0" 
          	:filterable="item.filterable || false" 
          	:loading-text="item.loadingText || '加载中'" 
          	:no-match-text="item.noMatchText || '无匹配数据'" 
          	:no-data-text="item.noDataText || '无数据'">
            <el-option v-for="(opt, idx) in item.list" :key="idx" :label="opt.label" :value="opt.value"></el-option>
          </el-select>
          <!--类型为单个时间时-->
        	<el-date-picker
        		v-else-if='item.isDateTime'
			      v-model="queryData[item.value]"
			      :size="item.size || 'small'" 
			      :style="{width: item.valueWidth + 'px' || '250px'}"
			      :type="item.dateType || date"
			      :placeholder="item.placeholder || '请选择日期'"
			      class="input-class"
			      :picker-options="item.pickerOption"
			      :readonly="item.readonly || false" 
			      :align="item.align || 'left'" 
			      :value-format="item.valueFormat" 
			      :default-value="item.defaultValue" 
			      :format="item.format || 'yyyy-MM-dd'">
			    </el-date-picker>
			    <!--类型为时间段的开始时间时-->
			    <el-date-picker
        		v-else-if='item.isStartTime'
			      v-model="queryData[item.value]"
			      :size="item.size || 'small'" 
			      :style="{width: item.valueWidth + 'px' || '250px'}"
			      :type="item.dateType || date"
			      :placeholder="item.placeholder || '请选择日期'"
			      class="input-class"
			      :picker-options="item.pickerOption"
			      :readonly="item.readonly || false" 
			      :align="item.align || 'left'" 
			      :value-format="item.valueFormat" 
			      :default-value="item.defaultValue" 
			      :format="item.format || 'yyyy-MM-dd'"
			      @change="change">
			    </el-date-picker>
			    <!--类型为时间段的结束时间时-->
  				<el-date-picker
        		v-else-if='item.isEndTime'
			      v-model="queryData[item.value]"
			      :size="item.size || 'small'" 
			      :style="{width: item.valueWidth + 'px' || '250px'}"
			      :type="item.dateType || date"
			      :placeholder="item.placeholder || '请选择日期'"
			      class="input-class"
			      :picker-options="item.pickerOption"
			      :readonly="item.readonly || false" 
			      :align="item.align || 'left'" 
			      :value-format="item.valueFormat" 
			      :default-value="item.defaultValue" 
			      :format="item.format || 'yyyy-MM-dd'"
			      @change="change">
			    </el-date-picker>
    		</el-form-item>
  		</template>
  		<!--外部自定义按钮时-->
  		<el-form-item
  			v-for="(item, index) in operateItems" 
  			:key="'k' + index">
	  		<el-button 
	  			:class="item.size || 'small'"
	  			:type="item.type"
	  			@click="operate(item.operateFuncName)">
	  			{{item.operateType}}
	  		</el-button>
    	</el-form-item>
    	<!--使用默认按钮时-->
      <el-form-item>
      	<el-button
      		v-if='defaultButton.searchIsShow'
      		:class="defaultButton.searchSize"
      		:type="defaultButton.searchType"
      		@click='search'>{{defaultButton.searchText}}</el-button>
  			<el-button
  				v-if='defaultButton.resetIsShow'
  				:class="defaultButton.resetSize"
      		:type="defaultButton.resetType"
      		@click='reset'>{{defaultButton.resetText}}</el-button>
      </el-form-item>
  </el-form>
</template>
<script>
export default {
props: {
	queryFormItems: {
		type: Array,
		default: () => []
	},
	operateItems: {
		type: Array,
		default: () => []
	},
	defaultButton: {
		type: Object,
		default: () => {
			return {
				searchIsShow: true,
    		resetIsShow: true,
    		searchText: '查询',
    		resetText: '重置',
    		searchType: 'success',
    		resetType: 'success',
    		searchSize: 'small',
    		resetSize: 'small'
			}
		}
	}
},
  data () {
    return {
      queryData: {},
    }
  },
  methods: {
    operate(v) {
    	this.$emit(v,this.queryData)
    },
    search() {
    	this.$emit('querySearch',this.queryData)
    },
    reset() {
    	this.queryData = {};
    	this.$emit('querySearch',this.queryData)
    },
    change() {
    	this.pickerOptionsSet();
    },
    pickerOptionsSet() {
    	this.queryFormItems.map((v,k) => {
    		if(v.needPickerOptions && this.queryData[v.limitBy]) {
    			let str = new Date(this.queryData[v.limitBy]).getTime()
    			if(str){
    				v.pickerOption = {
	    				disabledDate(time) {
	    					if(Object.keys(v)[0] == 'isEndTime'){
	    						return time.getTime() < str || time.getTime() > Date.now();
	    					}else{
	    						return time.getTime() > str ;
	    					}
			        }
	    			}
    			}
    		}
    	})
    },
    setDefaultValue() {
			let obj = {};
    	this.queryFormItems.map((v,k) => {
    		obj[v.value] = null;
    		if(v.setDefaultValue) {
    			obj[v.value] = v.setDefaultValue
    		}
    	})
    	this.queryData = JSON.parse(JSON.stringify(obj))
    }
  },
  created() {
		   this.setDefaultValue();
  }
}
</script>
<style scoped lang='scss'>
/deep/.input-class{
  .el-input__inner{
    width: 100% !important; 
  }  
}
.form-pos {
  text-align: left;
}
.medium,.small,.mini{
	margin:0 5px;
	padding: 0 15px;
}
.medium{
	height: 38px;
}
.small{
	height: 34px;
}
.mini{
	height: 30px;
}

 

</style>
